<template>
  <div class="container">
   <header-box />
    <div class="inputBox">
      <div class="searchBox">
        <input type="text" v-model="dayTime" placeholder="格式为YYYY-MM-DD" />
        <button @click="search">查询</button>
      </div>
      <h1>当前时间：{{content.date||"-"}}</h1>
      <h1>今年属相：{{content.animalsYear||"-"}}</h1>
      <h1>农历年名：{{content.lunarYear||"-"}}</h1>
      <h1>适宜事件：{{content.suit||"-"}}</h1>
      <h1>避免事件：{{content.avoid||"-"}}</h1>
    </div>
    <footer-box />
  </div>
</template>

<script>
import {toRefs,reactive} from "vue"
import { getDayData } from "@/services/request";
import headerBox from "@/components/header";
import footerBox from "@/components/footer";
export default {
  name: "MonthPage",
  components:{headerBox,footerBox},
  setup() {
     const data = reactive({
      dayTime: "",
      content: {},
    });
    const search = () => {
      getDayData(data.dayTime)
        .then((res) => {
          data.content = res.result.data;
        })
        .catch((err) => {
          console.log(err);
        });
    };
    return {
      ...toRefs(data),
      search,
    };
  }
}
</script>
<style lang="scss" scoped>
.container {
  height: 100vh;
  background-color: #05e8ba;
  background-image: linear-gradient(315deg, #05e8ba 0%, #087ee1 74%);
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  .inputBox {
    display: flex;
    padding: 10px;
    flex-flow: column;
    justify-content: flex-start;
    flex: 1;
    .searchBox{
      display: flex;
      justify-content: space-between;
       input {
      border-right: 0;
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: none;
      padding: 0 15px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
      &:focus {
        outline: none;
        border-color: #409eff;
      }
    }
    button {
      width: 70px;
      color: #fff;
      border: 1px solid #67c23a;
      border-color: #67c23a;
      background: #67c23a;
      cursor: pointer;
      outline: none;
      font-size: 14px;
      border-radius: 4px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      font-weight: 500;
    }
    }
  }
}
</style>
